<template>
  <view>
    <view class="top-header">
      <!-- 头部 -->
      <!-- <view class="header">
				<icon type="search" size="16" color="#bbb">
				</icon>
				<input type="text" v-model="query" confirm-type="search" @confirm="reload">
			</view> -->
      <SearchBar @search="doSearch" :query="query" />

      <!-- 过滤菜单 -->
      <view class="filter-menu">
        <view
          :class="{ active: index === activeIndex }"
          v-for="(item, index) in menuList"
          :key="index"
          @click="selectMenu(index)"
          >{{ item }}
        </view>
      </view>
    </view>

    <!-- 商品列表 -->
    <view class="goods-list">
      <view
        class="goods"
        v-for="(item, index) in goodsList"
        :key="index"
        @click="toItem(item.goods_id)"
      >
        <image :src="item.goods_small_logo" alt=""></image>
        <view class="right">
          <view class="goods-name text-line2">{{ item.goods_name }}</view>
          <view class="price"
            >￥<text>{{ item.goods_price }}</text
            >.00</view
          >
        </view>
      </view>
    </view>
    <view class="btm-line" v-show="isLastPage">
      --我是有底线的--
    </view>
  </view>
</template>

<script>
import SearchBar from '@/components/SearchBar'

const PAGE_SIZE = 6

export default {
  components: {
    SearchBar
  },
  data () {
    return {
      menuList: ['综合', '销量', '价格'],
      // 当前过滤栏菜单选中的是哪一个
      activeIndex: 0,
      // 搜索商品列表
      goodsList: [],
      // 搜索关键字
      query: '',
      isLastPage: false
    }
  },
  onLoad (options) {
    // 页码初始值为1
    this.pageNum = 1
    // 默认不在请求中
    this.isRequesting = false
    this.query = options.catName
    // 发请求
    this.queryGoodslist()
  },
  onPullDownRefresh () {
    this.reload()
  },
  // 上拉加载
  onReachBottom () {
    // 页码+1,发请求
    this.pageNum++
    this.queryGoodslist()
  },
  methods: {
    // 子传父的事件处理方法,获取到子输入框的值,进行搜索
    doSearch (inputVal) {
      this.query = inputVal
      this.reload()
    },
    // 跳转商品详情
    toItem (goodsId) {
      wx.navigateTo({
        url: '/pages/item/main?goodsId=' + goodsId
      })
    },
    reload () {
      this.pageNum = 1
      // 清空goodsList
      this.goodsList = []
      this.isLastPage = false // 重置
      this.queryGoodslist()
    },
    selectMenu (index) {
      this.activeIndex = index
    },
    async queryGoodslist () {
      // 进入请求前,判断如果请求中或者最后一页,return
      if (this.isRequesting || this.isLastPage) {
        return
      }
      // 请求前,标识请求中
      this.isRequesting = true
      let data = await this.$request({
        url: '/api/public/v1/goods/search',
        data: {
          // query:query
          query: this.query,
          pagenum: this.pageNum,
          pagesize: PAGE_SIZE
        },
        showLoading: false
      })

      // 请求结束后,标识不在请求中
      this.isRequesting = false
      // 同时停止下拉刷新的动画
      wx.stopPullDownRefresh()
      // this.goodsList = data.goods
      // 数据的追加
      this.goodsList = [...this.goodsList, ...data.goods]
      // 如果goodsList的长度和data.total相等,那么就是最后一页
      if (this.goodsList.length === data.total) {
        this.isLastPage = true
      }
    }
  }
}
</script>

<style lang="less">
.top-header {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 100;
}

.header {
  height: 120rpx;
  padding: 30rpx 16rpx;
  box-sizing: border-box;
  background-color: #eee;
  position: relative;

  icon {
    position: absolute;
    top: 48rpx;
    left: 44rpx;
  }

  input {
    height: 60rpx;
    width: 100%;
    border-radius: 4rpx;
    background-color: #fff;
    padding-left: 80rpx;
    box-sizing: border-box;
  }
}

.filter-menu {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100rpx;

  view.active {
    color: #eb4450;
  }
}

.goods {
  border-top: 1rpx solid #ddd;
  height: 260rpx;
  box-sizing: border-box;
  padding: 0 20rpx;
  display: flex;
  align-items: center;

  image {
    width: 200rpx;
    height: 200rpx;
  }

  .right {
    flex: 1;
    margin-left: 26rpx;

    .price {
      color: #eb4450;
      font-size: 24rpx;
      margin-top: 80rpx;

      text {
        font-size: 36rpx;
      }
    }
  }
}

.btm-line {
  text-align: center;
}
</style>
